<template>
  <div class="wd">
    <div class="dlzc">
      <li class="dl2" @click="tzdl">
        <img
          class="dl1"
          src="../../public/9bc230194518a52fd69fecab4072ff9.png"
          alt=""
        />
        <span class="dl" v-if="!obj.token">登录/注册</span>
        <span v-if="obj.token" style="color: #fff; font-size: 24px">
          {{ obj.zh }}</span
        >
      </li>
    </div>
    <div class="wddd">
      <li class="mm" @click="tzym('wddd')">
        <van-icon name="cart-o" size="40" />
        <p>我的订单</p>
        <p style="color: #ccc">买课发快递</p>
      </li>
      <li class="mm" @click="tzym('dhkc')">
        <van-icon name="comment-o" size="40" />
        <p>兑换课程</p>
        <p style="color: #ccc">兑换码兑换课程</p>
      </li>
      <li @click="tzym('dzgl')">
        <van-icon name="location-o" size="40" />
        <p>地址管理</p>
        <p style="color: #ccc">收货地址</p>
      </li>
    </div>
    <div class="wdsc">
      <div class="wdsc1">
        <li>
          <van-icon name="star-o" size="20" />
          <span @click="$router.push('/wdsc')">我的收藏</span>
        </li>
        <span>➡</span>
      </div>
      <div class="wdsc1">
        <li>
          <van-icon name="diamond-o" size="20" />
          <span @click="$router.push('/wdhy')">我的会员</span>
        </li>
        <span>➡</span>
      </div>
      <div class="wdsc1">
        <li @click="$router.push('/wdyhj')">
          <van-icon name="bill-o" size="20" /> <span>我的优惠卷</span>
        </li>
        <span>➡</span>
      </div>
    </div>
    <div class="wdsc">
      <div class="wdsc1">
        <li @click="$router.push('/wdxx')">
          <van-icon name="bullhorn-o" size="20" /> <span>我的消息</span>
        </li>
        <span>➡</span>
      </div>
      <div class="wdsc1">
        <li @click="$router.push('/wtfk')"><van-icon name="records" size="20" /> <span>问题反馈</span></li>
        <span>➡</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
let obj = reactive({
  token: localStorage.getItem("token"),
  zh: localStorage.getItem("zh"),
});
const router = useRouter();
// 点击跳转页面
const tzym = (url) => {
  router.push(`/${url}`);
};
const tzdl = () => {
  if (!localStorage.getItem("token")) {
    router.push("/login");
  }
};
</script>
<style lang="scss" scoped>
.mm {
  border-right: 1px solid #000;
}
.wdsc {
  margin-top: 20px;
}
.wdsc1 {
  display: flex;
  padding: 25px 18px;
  background: #fff;
  justify-content: space-between;
  .van-icon {
    margin-right: 15px;
  }
  span {
    font-size: 26px;
  }
}
.wddd {
  display: flex;
  box-sizing: border-box;
  padding: 15px;
  background: #fff;
  li {
    flex: 1;
    text-align: center;
    p {
      margin-top: 10px;
    }
  }
}
.wd {
  height: calc(100% - 8%);
  background: #f7f7f7;
}
.dl2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dl1 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 15px;
}
.dlzc {
  height: 35%;
  background-image: url("../../public/0da16759761a9e57a1cbcbb33c40635.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl {
  font-size: 32px;
  color: #fff;
}
* {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 20px;
}
</style>
